<template>
  <el-table :data="filterTableData" style="width: 100%;height: 870px;">
    <el-table-column label="姓名" prop="name" />
    <el-table-column label="性别" prop="gender" />
    <el-table-column label="身份证号" prop="identityNum" />
    <el-table-column label="电话" prop="phone" />
    <el-table-column label="密码" prop="password">
      <template #default="{ row }">
        <el-tooltip class="box-item" effect="dark" :content="row.password" placement="right-end">
          <el-input type="password" v-model="row.password" show-password readonly></el-input>
        </el-tooltip>

      </template>





    </el-table-column>
    <el-table-column label="工作" prop="job" />
    <el-table-column label="住址" prop="address" />
    <el-table-column label="注册时间" prop="createTime" />
    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="small" placeholder="搜索" />
      </template>
      <template #default="scope">
        <el-button link type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-popconfirm title="你确定删除吗？" @confirm="handleDelete(scope.$index, scope.row)">
          <template #reference>
            <el-button link type="primary" size="small">删除</el-button>
          </template>
        </el-popconfirm>

      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="dialogFormVisible" title="编辑患者👨">

    <el-form :model="user">
      <div class="box" style="width: 100%;height: 100%;display: flex;flex-direction: row;">

        <div class="left">
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="user.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-input v-model="user.gender" autocomplete="off" />
          </el-form-item>
          <el-form-item label="身份证" :label-width="formLabelWidth">
            <el-input v-model="user.identityNum" autocomplete="off" />
          </el-form-item>
          <el-form-item label="手机号" :label-width="formLabelWidth">
            <el-input v-model="user.phone" autocomplete="off" />
          </el-form-item>

        </div>

        <div class="right">
          <el-form-item label="工作" :label-width="formLabelWidth">
            <el-input v-model="user.job" autocomplete="off" />
          </el-form-item>
          <el-form-item label="地址" :label-width="formLabelWidth">
            <el-input v-model="user.address" autocomplete="off" />
          </el-form-item>

          <el-form-item label="创建时间" :label-width="formLabelWidth">
            <el-input v-model="user.createTime" autocomplete="off" />
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input v-model="user.password" autocomplete="off" />
          </el-form-item>

        </div>

      </div>

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="confrimEdit">
          确认更改
        </el-button>
      </span>
    </template>

  </el-dialog>
</template>

<script lang="ts" setup>
import { computed, onMounted, reactive, ref, toRefs } from 'vue'
import { deleteUserById, getUsers, editUser } from '../../api/user.js';
import dayjs from "dayjs"
interface User {
  id: string
  name: string
  identityNum: string
  gender: string
  age: string
  phone: string
  password: string
  job: string
  address: string
  createTime: string
}


onMounted(() => {
  getUsers().then(res => {
    console.log(res.data);
    res.data.forEach(item => {
      //@ts-ignore
      item.createTime = Math.floor(item.createTime / 1000)
      //@ts-ignore
      item.createTime = dayjs.unix(item.createTime).format('YYYY-MM-DD')
    })
    users.value = res.data

  })

})
const data = reactive({
  users: [] as User[],
  dialogFormVisible: false,

})
const formLabelWidth = ref('140px')

let user: User = reactive({
  id: "",
  name: "",
  identityNum: "",
  gender: "",
  age: "",
  phone: "",
  password: "",
  job: "",
  role: "",
  address: "",
  createTime: "",

})

let { users, dialogFormVisible } = toRefs(data)

const search = ref('')
let filterTableData = computed(() =>
  users.value.filter(
    (data) =>
      !search.value ||
      data.name.toLowerCase().includes(search.value.toLowerCase())
  )
)

const handleEdit = (index: number, row: User) => {
  dialogFormVisible.value = true
  Object.assign(user, row);

}
const handleDelete = async (index: number, row: User) => {
  console.log(index, row)
  try {
    const res = await deleteUserById(row.id)
    if (res.data.code == 200 && index !== -1) {
      users.value.splice(index, 1); // 删除行
      users.value = [...users.value]; // 更新数据源
    }
  } catch (error) {
    console.error(error);
  }
}

async function confrimEdit() {
  const res = await editUser(user)
  if (res.data.code == 200) {
    dialogFormVisible.value = false
    location.reload();

  }
}

</script>